<template>
    <ElCard shadow="hover" class="h-[100%]">
        <template #header>
            <div class="card-header">
                系统信息
            </div>
        </template>
        <ElSkeleton :loading="loading" animated :rows="4">
            <el-form :inline="true" :model="dataInfo" class="demo-form-inline" label-width="80px">
                <ElRow :gutter="20" justify="space-between">
                    <ElCol :span="12">
                        <el-form-item label="操作系统:">
                            {{ dataInfo.NETHostInfo.HostInformation.os }}
                            {{ dataInfo.NETHostInfo.HostInformation.platform }}
                            {{ dataInfo.NETHostInfo.HostInformation.platformVersion }}
                        </el-form-item>
                    </ElCol>
                    <ElCol :span="12">
                        <el-form-item label="磁盘容量:">
                            {{ bytesToSize(dataInfo.DiskInfo.Usage.total) }}
                        </el-form-item>
                    </ElCol>
                </ElRow>
                <ElRow :gutter="20" justify="space-between">
                    <ElCol :span="12">
                        <el-form-item label="主机名:">
                            {{ dataInfo.NETHostInfo.HostInformation.hostname }}
                        </el-form-item>
                    </ElCol>
                    <ElCol :span="12">
                        <el-form-item label="内存:">
                            {{ bytesToSize(dataInfo.MEMInfo.Virtual.total) }}
                        </el-form-item>
                    </ElCol>
                </ElRow>

                <ElRow :gutter="20" justify="space-between">
                    <ElCol :span="12">
                        <el-form-item label="Kernel:">
                            {{ dataInfo.NETHostInfo.HostInformation.kernelArch }}
                            {{ dataInfo.NETHostInfo.HostInformation.kernelVersion }}
                        </el-form-item>
                    </ElCol>
                    <ElCol :span="12">
                        <el-form-item label="CPU核数:">
                            {{ dataInfo.CPUInfo.PhysicalCores }}个
                        </el-form-item>
                    </ElCol>
                </ElRow>
            </el-form>
        </ElSkeleton>
    </ElCard>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getResourceConditionAPI } from '@/api/systemMonitor'
import { bytesToSize } from "@/utils/index"
const loading = ref(true)
let dataInfo = reactive({})


onMounted(() => {
    const getAllApi = async () => {
        return await Promise.all([getResourceConditionAPI(),])
    }
    getAllApi().then((result) => {
        dataInfo = {
            ...result[0].data,

        }
    }).finally(() => {
        loading.value = false;
    })
})
</script>
<style lang="less" scoped>
:deep(.demo-form-inline) {
    .el-form-item {
        margin-right: 0px;
    }

    .el-form-item--default {
        margin-bottom: 0px;
    }
}
</style>